import React from "react";
export default class Login1 extends React.Component {
  state = {
    userinfo: {
      uname: "",
      pwd: "",
      type: "sys",
      ismen: true,
    },
  };
  handerChange = (e) => {
    // console.log(e);
    //   1.0 获取当前元素的值（需要判断是一个复选框还是其他）
    let val = e.target.checked ? e.target.checked : e.target.value;
    //   2.0 根据事件源获取到当前dom对象的name属性，此属性值与state中的userinfo中的某个属性名称保持一致
    let pname = e.target.name;

    // 3.0 修改state中的 unserinfo[pname] = val
    // 3.0.1 先获取到整个userinfo对象
    let userinfo = this.state.userinfo;
    //   3.0.2 修改userinfo中的某个属性对应的值
    userinfo[pname] = val;
    // 4.0 将修改以后的userinfo对象完整的赋值给state中的userinfo对象完整修改
    this.setState({
      userinfo: userinfo,
    });
  };

  handerLogin = () => {
    console.log(this.state.userinfo);
  };

  render() {
    return (
      <div style={{ width: "400px", margin: "20px auto" }}>
        <div>
          用户：
          <input
            type="text"
            name="uname"
            placeholder="请输入用户名"
            value={this.state.userinfo.uname}
            onChange={this.handerChange}
          />
        </div>
        <div>
          密码：
          <input
            type="text"
            name="pwd"
            placeholder="请输入用户名"
            value={this.state.userinfo.pwd}
            onChange={this.handerChange}
          />
        </div>
        <div>
          类型
          <select
            name="type"
            value={this.state.userinfo.type}
            onChange={this.handerChange}
          >
            <option value="sys">系统管理员</option>
            <option value="other">员工 </option>
          </select>
        </div>
        <div>
          记住：
          <input
            type="checkbox"
            name="ismen"
            checked={this.state.userinfo.ismen}
            onChange={this.handerChange}
          />
        </div>

        <div>
          <button onClick={this.handerLogin}>登录</button>
        </div>
      </div>
    );
  }
}
